<template>
  <div id="orderList">
    <el-table
      :data="tableData"
      @expand-change="expandChange"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="收货人名字">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="店铺名称">
              <span>{{ props.row.restaurant_name }}</span>
            </el-form-item>
            <el-form-item label="收货地址">
              <span>{{ props.row.address }}{{ props.row.address_detail }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.restaurant_id }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="订单 ID" prop="id"></el-table-column>
      <el-table-column label="总价格" prop="total_amount"></el-table-column>
      <el-table-column label="订单状态" prop="status_bar.title"></el-table-column>
    </el-table>
    <div class="pageNext">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import api from '@/api/center'
  import store from '@/store'

  export default {
    data() {
      return {
        currentPage: 1,//当前页
        total: 0,//总数量
        tableData: [
          {
            id: '',
            total_amount: '',
            status_bar: {},
            restaurant_name: '',
            restaurant_id: '',
          }
        ]
      }
    },
    mounted: function () {
      let params = {
        limit: 10
      };
      api.queryOrdersList(params).then(res => {
        this.tableData = res;
      });
      api.queryOrdersCount().then(res => {
        if (res.status === 1) {
          this.total = res.count;
        }
      });
    },
    methods: {
      handleCurrentChange(val) {
        let params = {
          limit: 10,
          offset: this.currentPage * 10
        };
        api.queryOrdersList(params).then(res => {
          this.tableData = res;
        });
      },
      expandChange: function (row, expandedRows) {
        if (expandedRows.length) {
          let params = {
            address_id: row.address_id
          };
          api.queryAddress(params).then(res => {
            this.$nextTick(() => {
              for (let item of this.tableData) {
                if (row.id === item.id) {
                  item.address = res.address;
                  item.address_detail = res.address_detail;
                  item.name = res.name;
                }
              }
              this.tableData.splice(0, 0);//触发vue重新渲染列表
            })
          });
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .pageNext {
    position relative
    top 10px
    width 100%
  }

  .demo-table-expand {
    font-size 0
  }

  .demo-table-expand label {
    width 90px
    color #99a9bf
  }

  .demo-table-expand .el-form-item {
    margin-right 0
    margin-bottom 0
    width 50%
  }
</style>
